<template name="type2">
  <!-- 图片字体表盘 -->
  <view class="content">
    <view class="content-box">
      <view class="line1">
        <view class="hhmm">{{ hh }} <view class="dd">:</view> {{ mm }}</view>
        <view class="ss"><view class="dd2">:</view>{{ ss }}</view>
      </view>
      <view class="line2">
        <view class="week_day">{{ week_day }}</view>
        <view class="YYYYMMDD">
          <text class="YYYYMMDD">{{ YYYYMMDD }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import common from "@/node_modules/spanman/index.js";
import time1 from "static/type2/time1.jpg";
let timer3;
export default {
  data() {
    return {
      time1,
      week_day: "x",
      YYYYMMDD: "0000.00.00",
      hh: "00",
      mm: "00",
      ss: "00",
      w: 0, // 宽
      h: 0, // 高
      pingmu: "-", // -=横屏 |=竖屏
      line1h: "0px", // -=横屏 |=竖屏
      line3h: "100%", // -=横屏 |=竖屏
    };
  },
  mounted() {
    timer3 = null;
    timer3 = setInterval(this.init_page, 1000);

    uni.getSystemInfo({
      success: (res) => {
        console.log("res=", res);
        this.w = res.windowWidth;
        this.h = res.windowHeight;
        this.judge();
      },
    });
    uni.onWindowResize((res) => {
      this.w = res.size.windowWidth;
      this.h = res.size.windowHeight;
      if (this.w > this.h) {
        // 此时为横屏
        this.pingmu = "-";
      } else {
        // 此时为竖屏
        this.pingmu = "|";
      }
      this.judge();
    });
  },
  destroyed() {
    clearInterval(timer3);
    timer3 = null;
  },
  methods: {
    init_page() {
      this.get_week();
      this.make_time();
    },
    // 根据屏幕现状动态设置字体大小
    judge() {
      if (this.pingmu == "-") {
        this.line1h = this.h * 0.3 + "px";
        // this.line3h = (this.h - this.line1h - 30) + "px";
      } else {
        this.line1h = this.h * 0.3 + "px";
        // this.line3h = (this.h - this.line1h - 30) + "px";
      }
    },
    // 获取周几
    get_week() {
      let date = new Date();
      let week_day = date.getDay();
      console.log("week_day timer3 ", week_day);
      let res_str = "";
      switch (week_day) {
        case 0:
          res_str = "0";
          break;
        case 1:
          res_str = "1";
          break;
        case 2:
          res_str = "2";
          break;
        case 3:
          res_str = "3";
          break;
        case 4:
          res_str = "4";
          break;
        case 5:
          res_str = "5";
          break;
        case 6:
          res_str = "6";
          break;
        default:
          break;
      }
      this.week_day = res_str;
    },
    // 天气 https://www.juhe.cn/docs/api/id/73
    get_tianqi() {
      uni
        .request({
          url: "http://apis.juhe.cn/simpleWeather/query?city=西安&key=",
          method: "get",
        })
        .then((res) => {
          console.log("res：", res);
        });
    },

    make_time() {
      this.YYYYMMDD = common.getDate("YYYY.MM.DD");
      this.hh = common.getDate("hh");
      this.mm = common.getDate("mm");
      this.ss = common.getDate("ss");
    },
  },
};
</script>

<style>
@font-face {
  font-family: "mnjcgh";
  src: url("../static/fonts/mnjcgh.ttf");
}
@font-face {
  font-family: "sz3";
  src: url("../static/fonts/sz3.ttf");
}

.content {
  background: #1d1d1f;
  color: #f5f5f7;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* font-family: "mnjcgh"; */
  font-family: "sz3";
  display: flex;
  flex-direction: row;
}
.content-box {
  /* background: red; */
  width: 100%;
}
.line1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* align-items: flex-end; */
  align-items: baseline;
  padding: 0 40px;
  /* margin-top: 20px; */
}

.line2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 40px;
  font-size: 2em;
}

.YYYYMMDD {
  margin-left: 20px;
}

.hhmm {
  display: flex;
  flex-direction: row;
  font-size: 14em;
}

.ss {
  display: flex;
  flex-direction: row;
  font-size: 4em;
}
.dd {
  transform: translateY(-30px);
}
.dd2 {
  transform: translateY(-8px);
}
</style>
